<template>
  <div class="index">
    <el-calendar ref="calendar" v-model="nowDay">
      <template slot="dateCell" slot-scope="{ data }" :style="{ color: 'red' }">
        <div v-if="data.type === 'current-month'" class="day-context">
          <div class="day-title">{{ fomateDay(data) }}</div>
          <div v-if="form.checkList.indexOf(data.day) > -1" class="day-body">
            <el-badge is-dot></el-badge>
          </div>
        </div>
      </template>
    </el-calendar>
    <div class="calendar-log">
      <el-scrollbar style="height: 100%" wrap-style="overflow-x:hidden;" v-if="form.itemList.length > 0">
        <div v-for="item in form.itemList" :key="item.id" class="calendar-log-item">
          <div class="calendar-log-item-title">
            <i class="el-icon-s-flag" v-if="item.type === '1'"></i>
            <i class="el-icon-message-solid" v-if="item.type === '2'"></i>
            {{ item.name }}
          </div>
          <div class="calendar-log-item-icon">
            <el-popover
              placement="top-start"
              title="项目名称"
              width="200"
              trigger="click"
              :content="item.name"
            >
              <i slot="reference" class="el-icon-tickets"></i>
            </el-popover>
          </div>
        </div>
      </el-scrollbar>
      <div class="empty-body" v-if="form.itemList.length === 0">
        未找到日程信息
      </div>
    </div>
    <div v-if="model.showBtn.value" class="calendar-btn">
      <el-button
        icon="el-icon-plus"
        size="mini"
        plain
        class="calendar-btn-add"
        @click="onClick"
        v-if="$store.getters.roles.includes('SYS_CALENDAR_ADD')"
      />
      <el-button
        icon="el-icon-more"
        size="mini"
        plain
        class="calendar-btn-more"
        @click="onMore"
      />
    </div>
    <editCalendar ref="edit" @onCallBack="handlerQuery"></editCalendar>
    <sysCalendarDrawer ref="sysCalendarDrawer" @callBack="handlerQuery"></sysCalendarDrawer>
  </div>
</template>

<script>

import editCalendar from './dialog/editCalendar'
import { getDay, toDay } from '@/utils/time'
import { getCalendar } from '@/api/sysCalendar'
import sysCalendarDrawer from './drawer/sysCalendarDrawer'

export default {
  name: 'Calendar',
  components: {
    editCalendar, sysCalendarDrawer
  },
  props: ['model'],
  data() {
    return {
      nowDay: '',
      form: {
        checkList: [],
        itemList: []
      }
    }
  },
  watch: {
    nowDay: {
      handler(newVal) {
        this.nowDay = newVal
        this.handlerQuery()
      }
    }
  },
  methods: {
    onClick() {
      this.$refs['edit'].onShow(toDay(this.nowDay))
    },
    onMore() {
      this.$refs['sysCalendarDrawer'].onShow(this.nowDay)
    },
    fomateDay(data) {
      return data.day.split('-').slice(2).join('-')
    },
    handlerQuery() {
      getCalendar(toDay(this.nowDay)).then(res => {
        if (res.code === 20000) {
          this.form.itemList = res.data.itemList
          this.form.checkList = res.data.checkList
        }
      })
    }
  },
  mounted() {
    this.nowDay = getDay()
  }
}
</script>

<style scoped>
.index {
  height: 585px;
  width: 100%;
  border: 1px solid #EBEEF5;
  background-color: #FFF;
  border-radius: 5px;
}

/deep/ .el-calendar-table .el-calendar-day {
  height: 50px !important;
}

/deep/ .el-calendar__body {
  padding-bottom: 20px !important;
}

.day-context {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.day-title {
  font-size: 14px;
  font-weight: 500;
}

.empty-body {
  font-size: 14px;
  font-weight: 500;
  line-height: 150px;
  text-align: center;
}

.day-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.calendar-log {
  height: 150px;
  padding-left: 20px;
  padding-right: 20px;
}

ul,
li {
  font-size: 14px;
  font-weight: 500;
  float: left;
}

.calendar-log-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  margin-bottom: 10px;
}

.calendar-log-item-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.calendar-btn {
  height: 50px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  border-top: 1px solid #ebeef5;
}

.calendar-btn-more,
.calendar-btn-add {
  margin-bottom: 10px;
  margin-top: 10px;
}

.calendar-btn-more {
  margin-right: 10px;
}

/deep/ .el-calendar-table td.is-selected {
  background-color: rgb(66, 133, 244);
}

/deep/ .el-calendar-table:not(.is-range) td.next {
  display: none;
}

</style>
